new Vue({
  el: "#app",
  data() {
    return {
      i_Char_7: {},
      i_Gender: [],
      i_Map: {},
      i_ZhuanYun1: {},
      i_ZhuanYun2: {},
      i_FB: {},
      i_JK: [],
      i_JC: [],
      i_ShopSearch: [],
    };
  },
  mounted() {
    this.getData();
    this.getReady();
  },
  methods: {
    getReady() {
      var whei = $(window).width();
      $("html").css({ fontSize: whei / 22 });
      $(window).resize(function () {
        var whei = $(window).width();
        $("html").css({ fontSize: whei / 22 });
      });
    },
    getData() {
      const that = this;
      // 城市卖家
      $.ajax({
        url: "./ALLJSON/index3/char_7.json",
        type: "GET",
        success: function (res) {
          if (res.Status === "success") {
            if (that.i_Char_7 == res.Data) {
              return;
            }
            that.i_Char_7 = { ...res.Data };
            that.char_7({ ...res.Data });
          }
        },
      });

      // 性别占比
      $.ajax({
        url: "./ALLJSON/index3/gender.json",
        type: "GET",
        success: function (res) {
          if (res.Status === "success") {
            if (that.i_Gender == res.Data) {
              return;
            }
            that.i_Gender = res.Data;
            that.Gender(res.Data);
          }
        },
      });
      // 地图
      $.ajax({
        url: "./ALLJSON/index3/map.json",
        type: "GET",
        success: function (res) {
          if (res.Status === "success") {
            if (that.i_Map == res.Data) {
              return;
            }
            that.i_Map = res.Data;
            that.map(res.Data);
          }
        },
      });
      // 订单中心
      $.ajax({
        url: "./ALLJSON/survey/goodsorder.json",
        type: "GET",
        success: function (res) {
          if (res.Status === "success") {
            if (that.i_GoodsOrder == res.Data) {
              return;
            }
            that.i_GoodsOrder = res.Data;
            console.log(res.Data,'订单');
            that.ceshis3(res.Data);
          }
        },
      });
      // 各种分布
      $.ajax({
        url: "./ALLJSON/index3/fenbu.json",
        type: "GET",
        success: function (res) {
          if (res.Status === "success") {
            if (that.i_FB == res.Data) {
              return;
            }
            that.i_FB = res.Data;
            that.char_5(res.Data);
          }
        },
      });
      // 件的情况
      $.ajax({
        url: "./ALLJSON/index3/jiankuang.json",
        type: "GET",
        success: function (res) {
          if (res.Status === "success") {
            if (that.i_JK == res.Data) {
              return;
            }
            that.i_JK = res.Data;
            that.char_3(res.Data);
          }
        },
      });
      // 进场
      $.ajax({
        url: "./ALLJSON/index3/jc.json",
        type: "GET",
        success: function (res) {
          if (res.Status === "success") {
            if (that.i_JC == res.Data) {
              return;
            }
            that.i_JC = res.Data;
            that.char_6(res.Data);
          }
        },
      });
      // 商行搜索占比
      $.ajax({
        url: "./ALLJSON/index3/shopsearch.json",
        type: "GET",
        success: function (res) {
          if (res.Status === "success") {
            if (that.i_ShopSearch == res.Data) {
              return;
            }
            that.i_ShopSearch = res.Data;
            that.char_8(res.Data);
          }
        },
      });
    },
    char_7(da) {
      var myChart = echarts.init(document.getElementById("chart_7"));
      var data = { ...da };
      option = {
        title: [
          {
            text: data.title[0],
            left: "center",
            textStyle: {
              color: "#fff",
            },
          },
          {
            text: data.title[1],
            left: "center",
            top: "center",
            textStyle: {
              color: "#fff",
            },
          },
        ],
        color: [
          "#d74e67",
          "#0092ff",
          "#eba954",
          "#21b6b9",
          "#60a900",
          "#01949b",
          " #f17677",
        ],
        legend: {
          data: data.legend,
          left: "center",
          bottom: 10,
          textStyle: {
            color: "#ffffff",
          },
        },
        polar: {},
        angleAxis: {
          show: false,
          type: "value",
          min: 0,
          max: 360,
        },
        radiusAxis: {
          show: false,
          axisAngle: 0,
        },
        series: [],
      };
      for (let i = 0; i < 3; i++) {
        option.series.push({
          type: "pie",
          radius: [20 * i + "%", 20 * (i + 1) + "%"],
          silent: true,
          labelLine: {
            normal: {
              show: false,
            },
            emphasis: {
              show: false,
            },
          },
          itemStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "#FFFFFF",
                  },
                  {
                    offset: 0.1,
                    color: "#FFFFFF",
                  },
                  {
                    offset: 0.45,
                    color: "#DFDFFF",
                  },
                  {
                    offset: 0.55,
                    color: "#DFDFFF",
                  },
                  {
                    offset: 0.9,
                    color: "#FFFFFF",
                  },

                  {
                    offset: 1,
                    color: "#FFFFFF",
                  },
                ],
                false
              ),
            },
          },
          data: [{ value: 100 }],
        });
      }
      var size = [];
      for (let i = 0; i < data.data.length; i++) {
        size.push(data.data[i][2]);
      }
      for (let i = 0; i < data.data.length; i++) {
        option.series.push({
          name: data.legend[i],
          coordinateSystem: "polar",
          angleAxisIndex: 0,
          radiusAxisIndex: 0,
          type: "scatter",

          symbolSize: function (d) {
            return (d[2] * 50) / Math.max.apply(Math, size);
          },
          label: {
            normal: {
              show: true,
            },
          },
          data: [data.data[i]],
        });
      }
      setInterval(function () {
        for (var i = 0; i < data.data.length; i++) {
          data.data[i][1]++;
          if (data.data[i][1] >= 360) {
            data.data[i][1] = 0;
          }
        }
        // console.log(data.data[0][1])
        myChart.setOption(option);
      }, 100);
      // 使用刚指定的配置项和数据显示图表。
      //myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },

    Gender(gen) {
      var myChart = echarts.init(document.getElementById("Gender"));
      var symbols = gen;
      var bodyMax = 100; //指定图形界限的值
      var labelSetting = {
        normal: {
          show: true,
          position: "bottom",
          offset: [0, 10],
          formatter: function (param) {
            return ((param.value / bodyMax) * 100).toFixed(0) + "%";
          },
          textStyle: {
            fontSize: 18,
            fontFamily: "Arial",
            color: "#ffffff",
          },
        },
      };

      var markLineSetting = {
        //设置标线
        symbol: "none",
        lineStyle: {
          normal: {
            opacity: 0.3,
          },
        },
        data: [
          {
            type: "max",
            label: {
              normal: {
                formatter: "max: {c}",
              },
            },
          },
          {
            type: "min",
            label: {
              normal: {
                formatter: "min: {c}",
              },
            },
          },
        ],
      };
      // 男女标题

      option = {
        title: {
          text: "男女购买占比",
          subtext: "",
          left: "left",
          textStyle: {
            color: "#fff",
          },
        },
        tooltip: {
          show: false, //鼠标放上去显示悬浮数据
        },
        legend: {
          data: ["男性", "女性"],
          selectedMode: "single",
          itemWidth: 10, //图例的宽度
          itemHeight: 10, //图例的高度
          itemGap: 30,
          orient: "horizontal",
          left: "center",
          top: "20px",
          icon: "rect",
          // selectedMode: false, //取消图例上的点击事件
          textStyle: {
            color: "#ffffff",
          },
        },
        grid: {
          // left: '20%',
          // right: '20%',
          top: "20%",
          bottom: "20%",
          containLabel: true,
        },
        xAxis: {
          data: ["a", "x", "b"],
          axisTick: {
            show: false,
          },
          axisLine: {
            show: false,
          },
          axisLabel: {
            show: false,
          },
        },
        yAxis: {
          max: bodyMax,
          splitLine: {
            show: false,
          },
          axisTick: {
            // 刻度线
            show: false,
          },
          axisLine: {
            // 轴线
            show: false,
          },
          axisLabel: {
            // 轴坐标文字
            show: false,
          },
        },
        series: [
          {
            name: "男性",
            type: "pictorialBar",
            symbolClip: true,
            symbolBoundingData: bodyMax,
            label: labelSetting,
            data: [
              {
                value: 35,
                symbol: symbols[0],
                itemStyle: {
                  normal: {
                    color: "rgba(105,204,230)", //单独控制颜色
                  },
                },
              },
              {},
              {
                value: 65,
                symbol: symbols[1],
                itemStyle: {
                  normal: {
                    color: "rgba(255,130,130)", //单独控制颜色
                  },
                },
              },
            ],
            // markLine: markLineSetting,
            z: 10,
          },
          {
            name: "女性",
            type: "pictorialBar",
            symbolClip: true,
            symbolBoundingData: bodyMax,
            label: labelSetting,
            data: [
              {
                value: 70,
                symbol: symbols[0],
              },
              {},
              {
                value: 30,
                symbol: symbols[1],
              },
            ],
            // markLine: markLineSetting,
            z: 10,
          },
          {
            // 设置背景底色，不同的情况用这个
            name: "full",
            type: "pictorialBar", //异型柱状图 图片、SVG PathData
            symbolBoundingData: bodyMax,
            animationDuration: 0,
            itemStyle: {
              normal: {
                color: "#ccc", //设置全部颜色，统一设置
              },
            },
            z: 10,
            data: [
              {
                itemStyle: {
                  normal: {
                    color: "rgba(105,204,230,0.40)", //单独控制颜色
                  },
                },
                value: 100,
                symbol: symbols[0],
              },
              {
                // 设置中间冒号
                itemStyle: {
                  normal: {
                    color: "#1DA1F2", //单独控制颜色
                  },
                },
                value: 100,
                symbol: symbols[2],
                symbolSize: [8, "18%"],
                symbolOffset: [0, "-200%"],
              },
              {
                itemStyle: {
                  normal: {
                    color: "rgba(255,130,130,0.40)", //单独控制颜色
                  },
                },
                value: 100,
                symbol: symbols[1],
              },
            ],
          },
        ],
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },

    map(ma) {
      var myChart = echarts.init(document.getElementById("china"));

      var geoCoordMap = ma.geoCoorMap;
      var BJData = ma.BJData;
      var SHData = ma.SHData;
      var GZData = ma.GZData;

      var planePath =
        "path://M.6,1318.313v-89.254l-319.9-221.799l0.073-208.063c0.521-84.662-26.629-121.796-63.961-121.491c-37.332-0.305-64.482,36.829-63.961,121.491l0.073,208.063l-319.9,221.799v89.254l330.343-157.288l12.238,241.308l-134.449,92.931l0.531,42.034l175.125-42.917l175.125,42.917l0.531-42.034l-134.449-92.931l12.238-241.308L1705";

      var convertData = function (data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
          var dataItem = data[i];
          var fromCoord = geoCoordMap[dataItem[0].name];
          var toCoord = geoCoordMap[dataItem[1].name];
          if (fromCoord && toCoord) {
            res.push([
              {
                coord: fromCoord,
              },
              {
                coord: toCoord,
              },
            ]);
          }
        }
        return res;
      };

      var color = ["#3ed4ff", "#ffa022", "#a6c84c"];
      var series = [];
      [
        ["新乡", BJData],
        ["九江", SHData],
        ["新疆", GZData],
      ].forEach(function (item, i) {
        series.push(
          // {
          //   name: item[0] + " Top10",
          //   type: "lines",
          //   zlevel: 1,
          //   effect: {
          //     show: true,
          //     period: 6,
          //     trailLength: 0.7,
          //     color: "#fff",
          //     symbolSize: 3,
          //   },
          //   lineStyle: {
          //     normal: {
          //       color: color[i],
          //       width: 0,
          //       curveness: 0.2,
          //     },
          //   },
          //   data: convertData(item[1]),
          // },
          // {
          //   name: item[0] + " Top10",
          //   type: "lines",
          //   zlevel: 2,
          //   effect: {
          //     show: true,
          //     period: 6,
          //     trailLength: 0,
          //     symbol: planePath,
          //     symbolSize: 15,
          //   },
          //   lineStyle: {
          //     normal: {
          //       color: color[i],
          //       width: 1,
          //       opacity: 0.4,
          //       curveness: 0.2,
          //     },
          //   },
          //   data: convertData(item[1]),
          // },
          {
            name: item[0] + " Top10",
            type: "effectScatter",
            coordinateSystem: "geo",
            zlevel: 2,
            rippleEffect: {
              brushType: "stroke",
            },
            label: {
              normal: {
                show: true,
                position: "right",
                formatter: "{b}",
              },
            },
            symbolSize: function (val) {
              return val[2] / 8;
            },
            itemStyle: {
              normal: {
                color: color[i],
              },
            },
            data: item[1].map(function (dataItem) {
              return {
                name: dataItem[1].name,
                value: geoCoordMap[dataItem[1].name].concat([
                  dataItem[1].value,
                ]),
              };
            }),
          }
        );
      });

      option = {
        /*backgroundColor: '#080a20',*/
        title: {
          text: "各地客户数量",
          subtext: "",
          left: "left",
          textStyle: {
            color: "#fff",
          },
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          top: "bottom",
          left: "right",
          data: ["北京 Top10", "上海 Top10", "广州 Top10"],
          textStyle: {
            color: "#fff",
          },
          selectedMode: "single",
        },
        geo: {
          map: "china",
          label: {
            emphasis: {
              show: false,
            },
          },
          roam: true,
          itemStyle: {
            normal: {
              areaColor: "#132937",
              borderColor: "#0692a4",
            },
            emphasis: {
              areaColor: "#0b1c2d",
            },
          },
        },
        series: series,
      };

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
  // 订单情况
  ceshis3(order) {
    var myChart = echarts.init(document.getElementById("dingdan"));
    console.log(order);
    ordername = [];
    ordernum = [];
    for (var o = 0; o < order.length; o++) {
      ordername.push(order[o].name);
      ordernum.push(order[o].num);
    }
    var option = {
      tooltip: {
        trigger: "axis",
        axisPointer: { lineStyle: { color: "#fff" } },
      },
      legend: {
        icon: "rect",
        itemWidth: 14,
        itemHeight: 5,
        itemGap: 10,
        data: ordername,
        right: "10px",
        top: "0px",
        textStyle: { fontSize: 12, color: "#fff" },
      },
      grid: { x: 40, y: 50, x2: 45, y2: 40 },
      xAxis: [
        {
          type: "category",
          boundaryGap: false,
          axisLine: { lineStyle: { color: "#57617B" } },
          axisLabel: { textStyle: { color: "#fff" } },
          data: [
            "2月\n01号",
            "2月\n02号",
            "2月\n03号",
            "2月\n04号",
            "2月\n05号",
            "2月\n06号",
            "2月\n07号",
            "2月\n08号",
            "2月\n09号",
            "2月\n10号",
            "2月\n11号",
            "2月\n12号",
            "2月\n13号",
            "2月\n14号",
            "2月\n15号",
            "2月\n16号",
            "2月\n17号",
            "2月\n18号",
            "2月\n19号",
            "2月\n20号",
            "2月\n21号",
            "2月\n22号",
            "2月\n23号",
            "2月\n24号",
            "2月\n25号",
            "2月\n26号",
            "2月\n27号",
            "2月\n28号",
            "2月\n29号",
          ],
        },
      ],
      yAxis: [
        {
          type: "value",
          axisTick: {
            show: false,
          },
          axisLine: { lineStyle: { color: "#57617B" } },
          axisLabel: {
            margin: 10,
            textStyle: { fontSize: 12 },
            textStyle: { color: "#fff" },
            formatter: "{value}时",
          },
          splitLine: { lineStyle: { color: "#57617B" } },
        },
        {
          type: "value",
          axisTick: {
            show: false,
          },
          axisLine: { lineStyle: { color: "#57617B" } },
          axisLabel: {
            margin: 10,
            textStyle: { fontSize: 12 },
            textStyle: { color: "#fff" },
            formatter: "{value}个",
          },
          splitLine: { show: false, lineStyle: { color: "#57617B" } },
        },
      ],
      series: [
        {
          name: ordername[0],
          type: "line",
          smooth: true,
          lineStyle: { normal: { width: 2 } },
          yAxisIndex: 0,
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "rgba(185,150,248,0.3)",
                  },
                  {
                    offset: 0.8,
                    color: "rgba(185,150,248,0)",
                  },
                ],
                false
              ),
              shadowColor: "rgba(0, 0, 0, 0.1)",
              shadowBlur: 10,
            },
          },
          itemStyle: { normal: { color: "#B996F8" } },
          data: ordernum[0],
        },
        {
          name: ordername[1],
          type: "line",
          smooth: true,
          lineStyle: { normal: { width: 2 } },
          yAxisIndex: 0,
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "rgba(3, 194, 236, 0.3)",
                  },
                  {
                    offset: 0.8,
                    color: "rgba(3, 194, 236, 0)",
                  },
                ],
                false
              ),
              shadowColor: "rgba(0, 0, 0, 0.1)",
              shadowBlur: 10,
            },
          },
          itemStyle: { normal: { color: "#03C2EC" } },
          data: ordernum[1],
        },
        {
          name: ordername[2],
          type: "line",
          smooth: true,
          lineStyle: { normal: { width: 2 } },
          yAxisIndex: 1,
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "rgba(218, 57, 20, 0.3)",
                  },
                  {
                    offset: 0.8,
                    color: "rgba(218, 57, 20, 0)",
                  },
                ],
                false
              ),
              shadowColor: "rgba(0, 0, 0, 0.1)",
              shadowBlur: 10,
            },
          },
          itemStyle: { normal: { color: "#DA3914" } },
          data: ordernum[2],
        },
        {
          name: ordername[3],
          type: "line",
          smooth: true,
          lineStyle: { normal: { width: 2 } },
          yAxisIndex: 1,
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: "rgba(232, 190, 49, 0.3)",
                  },
                  {
                    offset: 0.8,
                    color: "rgba(232, 190, 49, 0)",
                  },
                ],
                false
              ),
              shadowColor: "rgba(0, 0, 0, 0.1)",
              shadowBlur: 10,
            },
          },
          itemStyle: { normal: { color: "#E8BE31" } },
          data: ordernum[3],
        },
      ],
    };
    /*var myChart = echarts.init(document.getElementById('channel_handle_detail'));
          myChart.clear();
          if(data.handleTimeData.length>0){
              myChart.setOption(option);
          }else{
              noDataTip($("#channel_handle_detail"));
          }*/
    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize", function () {
      myChart.resize();
    });
  },

    
    // 各种分布
    char_5(fb) {
      var myChart = echarts.init(document.getElementById("chart_5"));
      var ageFB = this.getContent(fb.ageFB);
      var genderFB = fb.genderFB;
      console.log(genderFB);
      var xueLiFB1 = fb.xueLiFB1;
      var xueLiFB2 = fb.xueLiFB2;
      option = {
        /*backgroundColor: '#141845',*/
        title: {
          text: "",
          textStyle: {
            color: "#fff",
          },
          x: "center",
          y: "20",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            // 坐标轴指示器，坐标轴触发有效
            type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
          },
        },
        title: [
          {
            text: "买家人员情况",
            textStyle: {
              color: "#fff",
              fontSize: "20",
            },
            x: "center",
            y: "50",
          },
          {
            text: "性别比例",
            top: "20%",
            left: "4%",
            textStyle: {
              color: "#fff",
            },
          },
          {
            text: "学历分布",
            top: "20%",
            left: "26%",
            textStyle: {
              color: "#fff",
            },
          },
          {
            text: "",
            top: "20%",
            left: "46%",
            textStyle: {
              color: "#fff",
            },
          },
          {
            text: "年龄分布",
            top: "20%",
            left: "85%",
            textStyle: {
              color: "#fff",
            },
          },
        ],
        legend: [],
        grid: {
          left: "63%",
          top: "center",
          right: "5%",
          containLabel: true,
        },
        xAxis: {
          type: "value",
          axisLine: {
            lineStyle: {
              color: "#fff",
            },
          },
        },
        yAxis: {
          type: "category",
          data: ageFB.name,
          axisLine: {
            lineStyle: {
              color: "#fff",
            },
          },
        },
        series: [
          {
            name: "人数",
            type: "bar",
            data: ageFB.num,
          },
          {
            tooltip: {
              trigger: "item",
              formatter: "{b} : {c} ({d}%)",
            },
            type: "pie",
            center: ["8%", "50%"],
            radius: ["20%", "39%"],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: true,
                position: "inside",
                formatter: "{b},{d}%",
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: "20",
                  fontWeight: "bold",
                },
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: genderFB,
          },
          {
            tooltip: {
              trigger: "item",
              formatter: "{b} : {c} ({d}%)",
            },
            type: "pie",
            center: ["30%", "50%"],
            radius: ["20%", "39%"],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: true,
                position: "inside",
                formatter: "{b},{d}%",
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: "20",
                  fontWeight: "bold",
                },
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: xueLiFB1,
          },
          {
            tooltip: {
              trigger: "item",
              formatter: "{b} : {c} ({d}%)",
            },
            type: "pie",
            center: ["50%", "50%"],
            radius: ["20%", "39%"],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: true,
                position: "inside",
                formatter: "{b},{d}%",
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: "20",
                  fontWeight: "bold",
                },
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: xueLiFB2,
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },
    // 件的情况
    char_3(data) {
      var myChart = echarts.init(document.getElementById("chart_3"));

      let seriesLineData = [];
      let LineData = data;

      for (var i = 0; i < LineData.length; i++) {
        seriesLineData.push({
          name: LineData[i].name,
          type: "line",
          smooth: true,
          symbol: "none", //去掉折线点
          stack: i, //数据区叠加 问题
          symbolSize: 5, //折线点的大小
          areaStyle: {
            normal: {
              color: new echarts.graphic.LinearGradient(
                0,
                0,
                0,
                1,
                [
                  {
                    offset: 0,
                    color: LineData[i].color[1],
                  },
                  {
                    offset: 0.8,
                    color: LineData[i].color[1],
                  },
                  {
                    offset: 1,
                    color: "#0f1e21", // 100% 处的颜色
                  },
                ],
                false
              ),
            },
          },
          itemStyle: {
            normal: {
              color: LineData[i].color[0],
              borderColor: LineData[i].color[0],
              borderWidth: 12,
            },
          },

          data: LineData[i].data,
        });
      }

      option = {
        /*backgroundColor: '#02121e',*/
        title: {
          text: "单位 / 件",
          textStyle: {
            fontSize: 12,
            fontWeight: "normal",
            color: "#c7cbcd", //标题颜色
          },
          left: "2%",
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
        },
        legend: {
          icon: "roundRect",
          orient: "horizontal", //图例朝向
          //  data: ['空闲', '训练事件'],
          textStyle: {
            fontSize: 12, //字体大小
            color: "#c7cbcd", //字体颜色
          },
          itemWidth: 10,
          itemHeight: 5,
          right: "3%", //距离右侧
        },

        grid: {
          left: "3%",
          top: "5%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: [
              "广州",
              "浙江",
              "上海",
              "福建",
              "江西",
              "安徽",
              "湖南",
              "湖北",
              "河南",
              "河北",
              "北京",
              "山西",
              "陕西",
              "贵州",
              "云南",
              "广西",
              "重庆",
              "四川",
              "内蒙",
              "辽宁",
              "黑龙江",
              "江西",
              "山东",
              "吉林",
              "青海",
              "海南",
              "宁夏",
              "天津",
            ],
            axisLabel: {
              interval: 0,
              rotate: 40, //倾斜角度
              show: true,
              textStyle: {
                color: "#c7cbcd",
              },
            },
            axisLine: {
              lineStyle: {
                color: "#0a2b52",
                width: 0.5, //这里是为了突出显示加上的
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            //  splitNumber : 10,
            interval: 10, //坐标抽分割间隔
            axisLine: {
              onZero: false,
              lineStyle: {
                color: "#0a2b52",
                width: 1, //这里是为了突出显示加上的
              },
            },

            axisLabel: {
              show: true,
              textStyle: {
                color: "#c7cbcd", //字体颜色
              },
            },
            splitLine: {
              //保留网格线
              show: true,
              lineStyle: {
                //y轴网格线设置
                color: "#0a2b52",
                width: 1,
                type: "dashed",
              },
            },
          },
        ],
        series: seriesLineData,
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },

    // 进场
    char_6(jc) {
      var myChart = echarts.init(document.getElementById("chart_6"));

      let data = jc;

      let dateList = [];
      let yData1 = [];
      let yData2 = [];
      data[0].list.forEach(function (item, index) {
        dateList.push(data[0].list[index].date);
        yData1.push(data[0].list[index].value);
      });
      data[1].list.forEach(function (item, index) {
        yData2.push(data[1].list[index].value);
      });

      option = {
        /*backgroundColor: 'rgb(3, 19, 52)',*/
        color: ["#2ea5c3", "#e08f68"],
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },

          formatter: function (params) {
            var tiplabel =
              params[0].name +
              "<br/>" +
              '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' +
              params[0].color.colorStops[0].color +
              '"></span>' +
              params[0].seriesName +
              ":" +
              params[0].value +
              "<br/>" +
              '<span style="display:inline-block;margin-right:5px;border-radius:10px;width:9px;height:9px;background-color:' +
              params[1].color.colorStops[0].color +
              '"></span>' +
              params[1].seriesName +
              ":" +
              params[1].value;
            return tiplabel;
          },
        },
        legend: {
          data: [data[0].name, data[1].name],
          right:"50",

          top:"10",
          icon: "circle",
          textStyle: {
            color: "#fff",
          },
        },
        grid: {
          //top:80,
          left: 20,
          bottom: 20,
          right: 40,
          containLabel: true,
        },
        xAxis: {
          type: "category",
          data: dateList,
          axisLabel: {
            tooltip: {
              show: true,
            },
            inside: false,
            textStyle: {
              fontSize: 14,
            },
            interval: 0,
            color: "rgba(255,255,255,0.6)",
          },
          axisTick: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: "#0C1A5B",
            },
          },
        },
        yAxis: [
          {
            type: "value",
            splitLine: {
              show: true,
              lineStyle: {
                color: "rgba(255,255,255,0.1)",
              },
            },
            axisTick: {
              show: false,
            },
            axisLine: {
              lineStyle: {
                color: "#0C1A5B",
              },
            },

            axisLabel: {
              textStyle: {
                fontSize: 14,
                // formatter: "{value} 万",
              },
              formatter: function (value) {
                return value+"万";
              },
              color: "rgba(255,255,255,0.6)",
            },
          },
        ],
        series: [
          {
            name: data[0].name,
            yAxisIndex: 0,
            //barMinHeight:5,
            barCategoryGap: "30%",
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: "top",
                  color: "#fff",
                  fontSize: 14,
                },
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#A43EE5",
                  },
                  {
                    offset: 1,
                    color: "#CE7C13",
                  },
                ]),
                opacity: 1,
                shadowBlur: 5,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
            type: "bar",
            data: yData1,
          },
          {
            name: data[1].name,
            yAxisIndex: 0,
            //barMinHeight:5,
            itemStyle: {
              normal: {
                label: {
                  show: true,
                  position: "top",
                  color: "#fff",
                  fontSize: 14,
                },
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#00FFFF",
                  },
                  {
                    offset: 1,
                    color: "#004EFF",
                  },
                ]),
                opacity: 1,
                shadowBlur: 10,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
            type: "bar",
            data: yData2,
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },

    // 商场搜索占比
    char_8(shopSearch) {
      var myChart = echarts.init(document.getElementById("chart_8"));

      option = {
        /*backgroundColor: '#2c343c',*/
        title: {
          text: "商品搜索占比",
          left: "center",
          top: 20,
          textStyle: {
            color: "#ccc",
          },
        },

        tooltip: {
          trigger: "item",
          formatter: "{b} : {c} ({d}%)",
        },

        visualMap: {
          show: false,
          min: 500,
          max: 600,
          inRange: {
            //colorLightness: [0, 1]
          },
        },
        series: [
          {
            name: "访问来源",
            type: "pie",
            radius: "50%",
            center: ["50%", "50%"],
            color: ["rgb(131,249,103)", "#FBFE27", "#FE5050", "#1DB7E5"], //'#FBFE27','rgb(11,228,96)','#FE5050'
            data: shopSearch.sort(function (a, b) {
              return a.value - b.value;
            }),
            roseType: "radius",

            label: {
              normal: {
                formatter: ["{c|{c}次}", "{b|{b}}"].join("\n"),
                rich: {
                  c: {
                    color: "rgb(241,246,104)",
                    fontSize: 20,
                    fontWeight: "bold",
                    lineHeight: 5,
                  },
                  b: {
                    color: "rgb(98,137,169)",
                    fontSize: 15,
                    height: 40,
                  },
                },
              },
            },
            labelLine: {
              normal: {
                lineStyle: {
                  color: "rgb(98,137,169)",
                },
                smooth: 0.2,
                length: 10,
                length2: 20,
              },
            },
            itemStyle: {
              normal: {
                shadowColor: "rgba(0, 0, 0, 0.8)",
                shadowBlur: 50,
              },
            },
          },
        ],
      };
      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option);
      window.addEventListener("resize", function () {
        myChart.resize();
      });
    },

    // 将数组中多个对象名字和变量归类，存入对象中
    getContent(arr) {
      var obj = {
        name: [],
        num: [],
      };
      for (var i = 0; i < arr.length; i++) {
        obj.name.push(arr[i].name);
        obj.num.push(arr[i].num);
      }
      return obj;
    },
  },
});
$(function () {
  char_4();

  //   map();

  //   Gender();
  //   char_1();
  //   char_2();
  //   char_3();
  /**/
  //   char_5();
  //   char_6();
  //   char_7();
//   char_8();

  function char_4() {
    var myChart = echarts.init(document.getElementById("maps"));

    //var uploadedDataURL = "./js/data-1519279347346-BkslpCjwf.json";

    var uploadedDataURL = "./js/data-1576140623415-kSH4vRQ1.json";

    $.getJSON(uploadedDataURL, function (geoJson) {
      echarts.registerMap("jiangxi", geoJson);
      var chinaGeoCoordMap = {
        合肥市: [117.29, 32.0581],
        亳州市: [116.1914, 33.4698],
        六安市: [116.3123, 31.8329],
        安庆市: [116.7517, 30.5255],
        宣城市: [118.8062, 30.6244],
        宿州市: [117.5208, 33.6841],
        池州市: [117.3889, 30.2014],
        淮北市: [116.6968, 33.6896],
        淮南市: [116.7847, 32.7722],
        滁州市: [118.1909, 32.536],
        芜湖市: [118.3557, 31.0858],
        蚌埠市: [117.4109, 33.1073],
        铜陵市: [117.9382, 30.9375],
        阜阳市: [115.7629, 32.9919],
        马鞍山市: [118.6304, 31.5363],
        黄山市: [118.0481, 29.9542],
      };
      var chinaDatas = [
        [
          {
            name: "合肥市",
            value: 0,
          },
        ],
        [
          {
            name: "亳州市",
            value: 0,
          },
        ],
        [
          {
            name: "六安市",
            value: 0,
          },
        ],
        [
          {
            name: "安庆市",
            value: 0,
          },
        ],
        [
          {
            name: "宣城市",
            value: 0,
          },
        ],
        [
          {
            name: "宿州市",
            value: 0,
          },
        ],
        [
          {
            name: "池州市",
            value: 0,
          },
        ],
        [
          {
            name: "淮北市",
            value: 0,
          },
        ],
        [
          {
            name: "淮南市",
            value: 0,
          },
        ],
        [
          {
            name: "滁州市",
            value: 0,
          },
        ],
        [
          {
            name: "芜湖市",
            value: 0,
          },
        ],
        [
          {
            name: "蚌埠市",
            value: 0,
          },
        ],
        [
          {
            name: "铜陵市",
            value: 0,
          },
        ],
        [
          {
            name: "阜阳市",
            value: 0,
          },
        ],
        [
          {
            name: "马鞍山市",
            value: 0,
          },
        ],
        [
          {
            name: "黄山市",
            value: 0,
          },
        ],
      ];

      var convertData = function (data) {
        var res = [];
        for (var i = 0; i < data.length; i++) {
          var dataItem = data[i];
          var fromCoord = chinaGeoCoordMap[dataItem[0].name];
          var toCoord = [117.29, 32.0581];
          if (fromCoord && toCoord) {
            res.push([
              {
                coord: fromCoord,
                value: dataItem[0].value,
              },
              {
                coord: toCoord,
              },
            ]);
          }
        }
        return res;
      };

      var series = [];
      [["合肥市", chinaDatas]].forEach(function (item, i) {
        console.log(item);
        series.push(
          {
            type: "lines",
            zlevel: 2,
            effect: {
              show: true,
              period: 4, //箭头指向速度，值越小速度越快
              trailLength: 0.02, //特效尾迹长度[0,1]值越大，尾迹越长重
              symbol: "arrow", //箭头图标
              symbolSize: 5, //图标大小
            },
            lineStyle: {
              normal: {
                width: 1, //尾迹线条宽度
                opacity: 1, //尾迹线条透明度
                curveness: 0.3, //尾迹线条曲直度
              },
            },
            data: convertData(item[1]),
          },
          {
            type: "effectScatter",
            coordinateSystem: "geo",
            zlevel: 2,
            rippleEffect: {
              //涟漪特效
              period: 4, //动画时间，值越小速度越快
              brushType: "stroke", //波纹绘制方式 stroke, fill
              scale: 4, //波纹圆环最大限制，值越大波纹越大
            },
            label: {
              normal: {
                show: true,
                position: "right", //显示位置
                offset: [5, 0], //偏移设置
                formatter: function (params) {
                  //圆环显示文字
                  return params.data.name;
                },
                fontSize: 13,
              },
              emphasis: {
                show: true,
              },
            },
            symbol: "circle",
            symbolSize: function (val) {
              return 5 + val[2] * 5; //圆环大小
            },
            itemStyle: {
              normal: {
                show: false,
                color: "#f00",
              },
            },
            data: item[1].map(function (dataItem) {
              return {
                name: dataItem[0].name,
                value: chinaGeoCoordMap[dataItem[0].name].concat([
                  dataItem[0].value,
                ]),
              };
            }),
          },
          //被攻击点
          {
            type: "scatter",
            coordinateSystem: "geo",
            zlevel: 2,
            rippleEffect: {
              period: 4,
              brushType: "stroke",
              scale: 4,
            },
            label: {
              normal: {
                show: true,
                position: "right",
                //offset:[5, 0],
                color: "#0f0",
                formatter: "{b}",
                textStyle: {
                  color: "#0f0",
                },
              },
              emphasis: {
                show: true,
                color: "#f60",
              },
            },
            symbol: "pin",
            symbolSize: 50,
            data: [
              {
                name: item[0],
                value: chinaGeoCoordMap[item[0]].concat([10]),
              },
            ],
          }
        );
      });

      option = {
        title: {
          text: "集中供货",  
          subtext: "",
          left: "left",
          textStyle: {
            color: "#fff",
          },
        },
        tooltip: {
          trigger: "item",
          backgroundColor: "rgba(166, 200, 76, 0.82)",
          borderColor: "#FFFFCC",
          showDelay: 0,
          hideDelay: 0,
          enterable: true,
          transitionDuration: 0,
          extraCssText: "z-index:100",
          formatter: function (params, ticket, callback) {
            //根据业务自己拓展要显示的内容
            var res = "";
            var name = params.name;
            var value = params.value[params.seriesIndex + 1];
            res =
              "<span style='color:#fff;'>" +
              name +
              "</span><br/>数据：" +
              value;
            return res;
          },
        },
        /*backgroundColor: "#013954",*/
        visualMap: {
          //图例值控制
          min: 0,
          max: 1,
          calculable: true,
          show: true,
          color: ["#f44336", "#fc9700", "#ffde00", "#ffde00", "#00eaff"],
          textStyle: {
            color: "#fff",
          },
        },
        geo: {
          map: "jiangxi",
          zoom: 1.2,
          label: {
            emphasis: {
              show: false,
            },
          },
          roam: true, //是否允许缩放
          itemStyle: {
            normal: {
              color: "rgba(51, 69, 89, .5)", //地图背景色
              borderColor: "#516a89", //省市边界线00fcff 516a89
              borderWidth: 1,
            },
            emphasis: {
              color: "rgba(37, 43, 61, .5)", //悬浮背景
            },
          },
        },
        series: series,
      };

      myChart.setOption(option);
    });

    // 使用刚指定的配置项和数据显示图表。
    //myChart.setOption(option);
    window.addEventListener("resize", function () {
      myChart.resize();
    });
  }
});
